<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title></title>
  <script src="jproton.js" type="text/javascript"></script>
  
<script type="text/javascript">

jDev.onReady(function testa() {

  $$event.add(
      $$console._cmdElement, 
      jDev.isIE || jDev.isSafari ? 'keydown' : 'keypress', 
      onKeyDown
    );

  window._sel = document.getElementById('sel');
  _sel.selectedIndex = 0;

});

function onKeyDown(e) {
  e = e || event;
  
  var code = e.keyCode;

  var cmd = $$console._cmdElement;
  var length = cmd.value.length;
  _sel.style.left = 37+length*7; 
  
  if (code == 38 /* up */) {
    var i = _sel.selectedIndex;
    if (i > 0) {
      _sel.selectedIndex = --i;
    }
    
  } else if (code == 40 /* down */) {
    var i = _sel.selectedIndex;
    if (i < _sel.length-1) {
      _sel.selectedIndex = ++i;
    }
    
  } else
    return;
  
  $$event.stop(e, true);
  
}

function oldInitPosition(textBox) {

  var storedValue = textBox.value;
  textBox.value = "";
  textBox.select();


  var caretPos = document.selection.createRange();
  textBox.__boundingTop = caretPos.boundingTop;
  textBox.__boundingLeft = caretPos.boundingLeft;
        
  textBox.value = " ";
  textBox.select();

  caretPos = document.selection.createRange();
  textBox.__boundingWidth = caretPos.boundingWidth;
  textBox.__boundingHeight = caretPos.boundingHeight;

  textBox.value = storedValue;
}

function initPosition(textBox) {

  var storedValue = textBox.value;
  textBox.value = "";
  textBox.select();

  //IE support
  if (document.selection) {
    var caretPos = document.selection.createRange();
    textBox.__boundingTop = caretPos.boundingTop;
    textBox.__boundingLeft = caretPos.boundingLeft;
          
    textBox.value = " ";
    textBox.select();

    caretPos = document.selection.createRange();
    textBox.__boundingWidth = caretPos.boundingWidth;
    textBox.__boundingHeight = caretPos.boundingHeight;

    textBox.value = storedValue;
    
  } else {
    //alert(textBox.selectionStart);
  }

}

function insertAtCursor(myField, myValue) {
	//IE support
	if (document.selection) {
		myField.focus();
		sel = document.selection.createRange();
		sel.text = myValue;
	}
	
	//MOZILLA/NETSCAPE support
	else if (myField.selectionStart || myField.selectionStart == '0') {
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		myField.value = myField.value.substring(0, startPos)
		+ myValue
		+ myField.value.substring(endPos, myField.value.length);
		
	} else {
		myField.value += myValue;
	}
}
/*
// calling the function
insertAtCursor(document.formName.fieldName, 'this value');
/**/

</script>
<style>

select {
  position: absolute;
  z-index: 999;
  bottom: 15px;
  left: 37px;
  height: 150px;
  width: 250px;
  font: 11px "Courier New";
}

</style>
  
  </head>
  <body>
  <h1>jDev - jProton Developer Tools</h1>
  
  <p>Testando... 1,2,3</p>
  
  <select id="sel" multiple>
    <option>opa</option>
    <option>epa</option>
    <option>upa</option>
    <option>eita</option>
    <option>vixi</option>
  </select>
  </body>
</html>
